<!--
 * @Author: your name
 * @Date: 2021-11-25 16:30:11
 * @LastEditTime: 2021-12-06 09:59:12
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\view\articleDetail\index.vue
-->
<template>
  <div class="article-detail">
    <!-- handler-icon 操作图标 -->
    <div class="handler-mark">
      <el-badge
        :value="info.likes"
        class="item"
        type="danger"
        @click.native="giveLikes"
        v-if="info.likes * 1"
        ><i class="iconfont icon-xihuan" v-if="!isLikes"></i>
        <i class="iconfont icon-xihuan" style="color: #ff0064" v-else></i>
      </el-badge>
      <el-badge class="item" type="danger" @click.native="giveLikes" v-else
        ><i class="iconfont icon-xihuan"></i>
      </el-badge>
      <div v-if="info.is_comment * 1" class="item">
        <i class="iconfont icon-chat-full"></i>
      </div>
      <div><i class="iconfont icon-fenxiang2"></i></div>
    </div>
    <div class="left">
      <el-card class="left-box">
        <div class="headline-left">
          <div><img :src="info.cover" alt="" /></div>
          <div>
            <p>{{ info.title }}</p>
            <div>
              <i>发布于{{ info.release_time }} · 阅读量 {{ info.looks }}</i>
            </div>
          </div>
        </div>
        <v-md-preview
          :include-level="[3, 4]"
          :text="info.content"
        ></v-md-preview>
      </el-card>
      <template v-if="info.is_comment * 1">
        <p class="comment_hint">评论</p>
        <el-card class="">
          <a-textarea
            :rows="4"
            style="resize: none"
            v-model="replyValue"
            placeholder="请输评论内容"
            @focus="isHaveUser()"
          />
          <div class="handler-comment">
            <div></div>
            <button
              class="pub-btn"
              @click="pubComment()"
              :disabled="isDisabled"
            >
              发布
            </button>
          </div>
        </el-card>
        <el-card
          v-for="item in commentList"
          :key="item.id"
          class="comment-item-card"
        >
          <div class="avatar-box">
            <div class="avatar">{{ item.avatar }}</div>
            <div>{{ item.author }}</div>
          </div>
          <div>{{ item.content }}</div>
          <div>{{ item.before_time }}</div>
        </el-card>
      </template>
    </div>
    <div class="right-box">
      <RecommendArticle
        :data="recommendList"
        :handlerClick="toArticleDetail"
        :title="$t('recommend_title')"
      />
    </div>
    <!-- 控制条件阅读 -->
    <div class="mask" v-if="pwd_visible || pay_visible || user_visible">
      <a-modal
        title="确认以下收费信息"
        :visible="pay_visible"
        @ok="goPay"
        @cancel="handleCancel"
        okText="立即支付"
        cancelText="取消"
        okType="danger"
        width="400px"
      >
        <div class="pay_info_box">支付金额 : ￥ {{ info.pay_check }}</div>
      </a-modal>
      <a-modal
        title="文章受保护，请输入访问密码"
        :visible="pwd_visible"
        @ok="handleOk"
        @cancel="handleCancel"
        okText="确认"
        cancelText="回首页"
        okType="danger"
      >
        <div class="pwd_inp_box">
          <span>密码 : </span>
          <a-input-password v-model="visit_pwd" />
        </div>
      </a-modal>
      <a-modal
        title="请设置你的信息"
        :visible="user_visible"
        @ok="saveUser"
        @cancel="user_visible = false"
        okText="设置"
        cancelText="取消"
        okType="danger"
      >
        <div class="pwd_inp_box">
          <span>名称 : </span>
          <a-input v-model="name" />
        </div>
        <div class="pwd_inp_box" style="margin-top: 20px">
          <span>邮箱 : </span>
          <a-input v-model="email" />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import RecommendArticle from "../../components/Recommend.vue";
import api from "../../api";
import getDateDiff from "../../utils/getDateDiff.js";
export default {
  components: {
    RecommendArticle,
  },
  data() {
    return {
      info: {},
      recommendList: [],
      isLikes: null,
      pwd_visible: false, //密码弹框
      pay_visible: false, //支付弹框
      visit_pwd: "", //访问密码
      replyValue: "", //评论
      user_visible: false,
      name: "",
      email: "",
      parent_id: null,
      parent_content: null,
      commentList: [],
    };
  },
  computed: {
    isDisabled() {
      if (this.replyValue) return false;
      return true;
    },
  },
  methods: {
    init() {
      //获取详情
      this.getDetail();
      //是否喜欢
    },
    //发布评论
    async pubComment() {
      const user = JSON.parse(window.localStorage.getItem("user"));
      const res = await api.addCommentList({
        email: user.email,
        content: this.replyValue,
        article_id: this.info.id,
        parent_content: this.parent_content,
        parent_id: this.parent_id,
        author: user.name,
      });
      if (res.success) {
        this.$message.success("评论成功，已提交审核");
        this.replyValue = "";
      } else {
        this.$message.warning("意外的错误");
      }
    },
    //获取文章详情
    async getDetail() {
      const res = await api.getArticleDetail(this.$route.params.id);
      this.info = res.data;
      if (this.info.visit_pwd) this.pwd_visible = true;
      if (this.info.pay_check * 1 && !this.info.is_pay) this.pay_visible = true;
      await this.isLike();
      this.getRecommendArticle();
      this.addArticleReading();
      if (res.data.is_comment * 1) {
        this.getCommentList();
      }
    },
    //增加阅读量
    async addArticleReading() {
      await api.addArticleReading({ id: this.$route.params.id });
    },
    //获取推荐
    async getRecommendArticle() {
      const res = await api.recommendArticle();
      this.recommendList = res.data;
      const index = this.recommendList.findIndex(
        (item) => item.id === this.info.id
      );
      if (index !== -1) {
        this.recommendList.splice(index, 1);
      }
    },
    //获取评论列表
    async getCommentList() {
      const res = await api.getArticleComment(this.info.id);
      this.commentList = res.data;
      this.commentList = this.commentList.map((item) => {
        return {
          ...item,
          before_time: getDateDiff(new Date(item.comment_time).getTime()),
          avatar: item.author.split("")[0],
        };
      });
    },
    //跳转文章详情
    toArticleDetail(id) {
      this.$router.push({
        path: `/article/${id}`,
      });
      //重新获取详情
      this.getDetail();
    },
    //点赞
    async giveLikes() {
      const ip = window.sessionStorage.getItem("ip");
      await api.addArticleLikes({ article_id: this.info.id, ip });
      this.getDetail();
    },
    //是否已经点赞
    async isLike() {
      const ip = window.sessionStorage.getItem("ip");
      const res = await api.isArticleLikes({ article_id: this.info.id, ip });
      this.isLikes = res.data;
    },
    showModal() {
      this.visible = true;
    },
    handleOk() {
      if (this.visit_pwd === this.info.visit_pwd) {
        this.pwd_visible = false;
      } else {
        this.$message.error("密码错误");
      }
    },
    //跳转支付页面
    async goPay() {
      const res = await api.pay({
        odd: this.info.id,
        pay: this.info.pay_check,
        title: this.info.title,
        id: this.info.id,
      });
      window.location.href = res.url;
    },
    //回首页---(取消按钮)
    handleCancel() {
      this.$router.push("/");
    },
    //保存用户信息
    saveUser() {
      if (this.name && this.email) {
        this.user_visible = false;
        window.localStorage.setItem(
          "user",
          JSON.stringify({ name: this.name, email: this.email })
        );
      } else {
        this.$message.warning("输入框不得为空");
      }
    },
    //判断是否可以获取到用户信息
    isHaveUser() {
      const user = JSON.parse(window.localStorage.getItem("user"));
      if (!user) this.user_visible = true;
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/common/common.scss";
.article-detail {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 70%;
  }
  .right-box {
    width: 28%;
  }
}
.el-card {
  @include font_color("text-color");
  @include background_color("card_background");
  border: none;
}
.headline-left {
  width: 100%;
  > div {
    width: 100%;
  }
  img {
    width: 100%;
  }
  > div p {
    font-weight: bold;
    font-size: 36px;
    text-align: center;
    margin: 10px 0;
  }
  > div div {
    text-align: center;
  }
}
.handler-mark {
  position: fixed;
  top: 200px;
  left: 120px;
  div {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin: 15px;
    display: block;
    @include background_color("handler_icon_gbColor");
    border-radius: 50%;
    cursor: pointer;
    .iconfont {
      color: #a6a6a6;
      // @include font_color("handler_icon_color");
      font-size: 20px;
    }
  }
  div:hover .iconfont {
    color: #ff0064;
  }
}
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
.pwd_inp_box {
  display: flex;
  align-items: center;
  span {
    width: 50px;
    color: #000;
  }
  .ant-input-password {
    flex: 1;
  }
}
.pay_info_box {
  text-align: center;
  color: #000;
}
.comment_hint {
  text-align: center;
  margin: 20px 0;
}
textarea {
  @include font_color("text-color");
  @include background_color("card_background");
  @include border_color("card_border_color");
}
.handler-comment {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .pub-btn {
    padding: 6px 16px;
    @include background_color("pub_bgColor");
    border: 1px solid;
    @include border_color("pub_border_color");
  }
}
.comment-item-card {
  margin: 10px 0;
  div {
    margin: 15px 0;
    margin-top: 0;
  }
}
.avatar-box {
  display: flex;
  align-items: center;
  .avatar {
    background-color: #f5222d;
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
</style>
